<template>
  <div class="login-container">
    <div class="form-area">
      <ul class="title">
        <li class="btn current"></li>
      </ul>
      <login-form
      ref="loginRef"
      :config="config"
      :form="form"
      :rules="loginRule"
      ></login-form>
      <div class="ope-area">
          <div class="register-btn" @click="goToRegister">去注册</div>
          <div class="forgot-btn">忘记密码</div>
        </div>
      <div class="ope-btn" @click="submitLogin">登录</div>
    </div>
  </div>
</template>
<script>
// import VerifyCode from "../../../components/verify-code/index.vue";
// import { createNamespacedHelpers } from 'vuex'
// import { loginApi } from '../api/api.js'
// const { mapState, mapActions } = createNamespacedHelpers("user");
import LoginForm from '../../../components/login-form/login-form.vue'
export default {
  components: {
    // VerifyCode,
    LoginForm
  },
  methods: {
    // handleVerifyCode(vc) {
    //   this.vCode = vc;
    // },
    // ...mapActions({
    //   doLogin: 'DO_LOGIN'
    // }),
    goToRegister () {
      this.$router.push({
        path: '/user/register'
      })
    },
    async submitLogin () {
      this.$refs.loginRef.validate(async (err, data) => {
        if (err) {
          return false
        }
        await this.$store.dispatch('DO_LOGIN', data)
        this.$router.push({
          path: '/'
        })
      })
    }
  },
  data: () => {
    return {
      // vCode: "",
      form: {},
      config: [
        { key: 'account', label: '账号', placeholder: '您的账号', icon: 'iconfont icon-user' },
        { key: 'password', label: '密码', placeholder: '您的密码', icon: 'iconfont icon-password', type: 'password' }
      ],
      loginRule: {
        account: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
        password: [{ required: true, message: '请输入账号', trigger: 'blur' }]
      }
    }
  }
}
</script>
<style scoped>
input {
  background: none;
  outline: none;
  border: none;
}
input:focus {
  border: none;
}
.login-container {
  position: fixed;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #f1f1f1;
}
.form-area {
  position: absolute;
  width: 400px;
  height: 330px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  top: 50%;
  left: 50%;
  margin-left: -250px;
  margin-top: -265px;
  padding: 50px;
}
.form-area .title {
  color: #969696;
  text-align: center;
  font-size: 18px;
}
.form-area .title > li {
  display: inline-block;
  vertical-align: middle;
  padding: 10px;
  border-bottom: 2px solid #fff;
}
.form-area .title > li.btn.current {
  color: #ea6f5a;
}

.ope-btn {
  width: 300px;
  margin: 0 auto;
  padding: 9px 0;
  font-size: 18px;
  border-radius: 25px;
  background: #42c02e;
  text-align: center;
  color: #fff;
  cursor: pointer;
}

.ope-area {
  width: 300px;
  margin: 0 auto 15px;
  overflow: auto;
  font-size: 14px;
}
.ope-area .register-btn {
  float: left;
  color: #337ab7;
  font-weight: 500;
  cursor: pointer;
}
.ope-area .forgot-btn {
  float: right;
  color: #999;
  cursor: pointer;
}
</style>
